$(document).ready(function () {
			var fromDate;
			var toDate;  
			var primaryOpenTradesServiceUrl = ezopsContextPath+"/getReports/getopentradesgrid";
        	$('#dateRange').daterangepicker({
        		   /*minDate: new Date()*/
				/* format : 'MM-DD-YYYY',
				/*separator : ' to ' */
			});
        	$('#dateRange-upcoming').daterangepicker({
        		minDate: new Date()
        	});
        	
            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({ position: 'top', animationType: 'fade' });
            
            var source =
            {
                dataType: "json",
                dataFields: [
                        { name: 'id', type: 'string' },
                        { name: 'entityId', type: 'string' },
                        { name: 'bookId', type: 'string' },
                        { name: 'partyId', type: 'string' },
						{ name: 'productDescription', type: 'string' },
						{ name: 'quantity', type: 'string' },
						{ name: 'buySell', type: 'string' },
						{ name: 'settleCurrency', type: 'string' },
						{ name: 'settleAmount', type: 'string' },
						{ name: 'status', type: 'string'},
						{ name: 'tradeTime', type: 'string' },
						{ name: 'price', type: 'string' },
						{ name: 'settlementDate', type: 'string' },
						{ name: 'priceType', type: 'string' },
						{ name: 'riskMaturity', type: 'string' },
						{ name: 'workflowSubType', type: 'string' },
						{ name: 'lastEventType', type: 'string' },
						{ name: 'accrual', type: 'string' },
						{ name: 'brokerId', type: 'string' },
						{ name: 'fees', type: 'string' },
						{ name: 'mtMBookingStatus', type: 'string' }
                ], 
                url:  primaryOpenTradesServiceUrl
            };
/*            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                return '<span style="margin: 4px; margin-right: 10px; font-size: 15px; float: ' + columnproperties.cellsalign + ';">' + value + '</span>';
            }*/
            var dataAdapter =new $.jqx.dataAdapter(source, {
                loadComplete: function (data) {  },
                loadError: function (xhr, status, error) {
                	//console.log("status##"+status);
                	//console.log("error##"+error);
                }    
            });
            console.log(dataAdapter);
            // create jqxDataTable.
            $("#dataTable").jqxGrid(
            {
                source: dataAdapter,
                width: '100%',
                pageable:true,
                autorowheight: true,
                autoheight: true,
                filterable: true,
                altRows: true,
                groupable: true,
                columnsresize: true,
                columnsreorder: true,
                sortable: true,
                columns: [
    {text:'Id',dataField:'id',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'EntityId',dataField:'entityId',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'BookId',dataField:'bookId',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'Party Id',dataField:'partyId',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'Product Description',dataField:'productDescription',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'Quantity',dataField:'quantity',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'BuySell',dataField:'buySell',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'SettleCurrency',dataField:'settleCurrency',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'SettleAmount',dataField:'settleAmount',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'Status',dataField:'status',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'TradeTime',dataField:'tradeTime',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'Price',dataField:'price',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'SettlementDate',dataField:'settlementDate',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'PriceType',dataField:'priceType',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'RiskMaturity',dataField:'riskMaturity',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'WorkflowSubType',dataField:'workflowSubType',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
    {text:'LastEventType',dataField:'lastEventType',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
	{text:'Accrual',dataField:'accrual',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
	{text:'BrokerId',dataField:'brokerId',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
	{text:'Fees',dataField:'fees',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
	{text:'MTMBookingStatus',dataField:'mtMBookingStatus',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'}
                ]/*,
                columnGroups: 
                [
                  { text: 'Inbound', align: 'left', name: 'ProductDetails' }
                ]*/
            });
            
            $("#dataTable").on("groupsChanged", function (event) 
             	    {
             	    	//console.log("The pagesize has been changed");
             	    	var args = event.args;
             	    	if(args.type == "Remove"){
             	    		$('#dataTable').jqxGrid({ pageable: true}); 
             	    		$( "#dataTable" ).trigger( "pagesizechanged" );
             	    	}
             	    	else if(args.type == "Add"){
             	    		$('#dataTable').jqxGrid({ pageable: false}); 
             	    		$( "#dataTable" ).trigger( "pagesizechanged" );
             	    	}
             	    });
            
            $('#searchOpenTrades').click(function(){
        		var openTradeDateRange = new String($("#dateRange").val());
        		if(openTradeDateRange != null & openTradeDateRange != ''){
        			var dates = openTradeDateRange.split(" - ");
        			fromDate = dates[0];
        			toDate = dates[1];
        			openTradesServiceUrl = primaryOpenTradesServiceUrl+"?refresh=false&fromDate="+fromDate+"&toDate="+toDate;
        			source.url = openTradesServiceUrl;
        			var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#dataTable").jqxGrid({ source: dataAdapter });
        		}
        		else{
        			openTradesServiceUrl = primaryOpenTradesServiceUrl;
        		}
        	});
            
            // prepare the data
            var primaryUpcomingSettlementServiceUrl = ezopsContextPath+"/getReports/getupcomingsettlementgrid";
            $('#searchUpcomingSettlement').click(function(){
            	var upcomingSettlementDateRange = new String($("#dateRange-upcoming").val());
            	var fromDate1, toDate1;
            	if(upcomingSettlementDateRange != null & upcomingSettlementDateRange != ''){
            		var upcomingDates = upcomingSettlementDateRange.split(" - ");
            		fromDate1 = upcomingDates[0];
            		toDate1 = upcomingDates[1];
            		upcomingSettlementServiceUrl = primaryUpcomingSettlementServiceUrl+"?refresh=false&fromDate="+fromDate1+"&toDate="+toDate1;
            		source1.url = upcomingSettlementServiceUrl;
            		var dataAdapter = new $.jqx.dataAdapter(source1);
                    $("#dataTable2").jqxGrid({ source: dataAdapter });
            	}
            	else{
            		upcomingSettlementServiceUrl = primaryUpcomingSettlementServiceUrl;
            	}
            });
			
            var source1 =
            {
                dataType: "json",
                dataFields: [
                        { name: 'id', type: 'string' },
                        { name: 'entityId', type: 'string' },
                        { name: 'bookId', type: 'string' },
                        { name: 'partyId', type: 'string' },
						{ name: 'productDescription', type: 'string' },
						{ name: 'settlementDate', type: 'string' },
						{ name: 'status', type: 'string'},
						{ name: 'quantity', type: 'string' },
						{ name: 'settleAmount', type: 'string' },
						{ name: 'settleCurrency', type: 'string' },
						{ name: 'accrual', type: 'string' },
						{ name: 'buySell', type: 'string' },
						{ name: 'price', type: 'string' },
						{ name: 'priceType', type: 'string' },
						{ name: 'riskMaturity', type: 'string' },
						{ name: 'tradeTime', type: 'string' },
						{ name: 'workflowSubType', type: 'string' },
						{ name: 'lastEventType', type: 'string' },
						{ name: 'brokerId', type: 'string' },
						{ name: 'fees', type: 'string' },
						{ name: 'mtMBookingStatus', type: 'string' }
                ], 
                url: primaryUpcomingSettlementServiceUrl
            };
            var dataAdapter = new $.jqx.dataAdapter(source1, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
        
            $("#dataTable2").jqxGrid(
            {
                source: dataAdapter,
                width: '100%',
                autorowheight: true,
                autoheight: true,
                pageable:true,
                filterable: true,
                //selectionmode: 'multiplecellsextended',
                altRows: true,
                groupable: true,
                columnsresize: true,
                columnsreorder: true,
                sortable: true,
                columns: [ 
				{text:'Id',dataField:'id',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'EntityId',dataField:'entityId',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'BookId',dataField:'bookId',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'Party Id',dataField:'partyId',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'Product Description',dataField:'productDescription',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'SettlementDate',dataField:'settlementDate',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'Status',dataField:'status',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'Quantity',dataField:'quantity',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'SettleAmount',dataField:'settleAmount',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'SettleCurrency',dataField:'settleCurrency',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'Accrual',dataField:'accrual',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'BuySell',dataField:'buySell',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'Price',dataField:'price',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'PriceType',dataField:'priceType',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'RiskMaturity',dataField:'riskMaturity',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'TradeTime',dataField:'tradeTime',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'WorkflowSubType',dataField:'workflowSubType',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
			    {text:'LastEventType',dataField:'lastEventType',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
				{text:'BrokerId',dataField:'brokerId',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
				{text:'Fees',dataField:'fees',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'},
				{text:'MTMBookingStatus',dataField:'mtMBookingStatus',cellsAlign: 'center',columngroup: 'ProductDetails', align: 'center',  width: '100px'}
                ]
            });
            
            $("#dataTable2").on("groupsChanged", function (event) 
             	    {
             	    	//console.log("The pagesize has been changed");
             	    	var args = event.args;
             	    	if(args.type == "Remove"){
             	    		$('#dataTable2').jqxGrid({ pageable: true}); 
             	    		$( "#dataTable2" ).trigger( "pagesizechanged" );
             	    	}
             	    	else if(args.type == "Add"){
             	    		$('#dataTable2').jqxGrid({ pageable: false}); 
             	    		$( "#dataTable2" ).trigger( "pagesizechanged" );
             	    	}
             	    });
            
            $('#refeshOpenTrades').click(function () {
            	openTradesServiceUrl = primaryOpenTradesServiceUrl+"?refresh=true";
    			source.url = openTradesServiceUrl;
    			var dataAdapter = new $.jqx.dataAdapter(source);
                $("#dataTable").jqxGrid({ source: dataAdapter });
            	//$("#dataTable").jqxGrid('updatebounddata');
            });
            $('#refeshUpcomingSettlement').click(function () {
            	upcomingSettlementServiceUrl = primaryUpcomingSettlementServiceUrl+"?refresh=false";
        		source1.url = upcomingSettlementServiceUrl;
        		var dataAdapter = new $.jqx.dataAdapter(source1);
                $("#dataTable2").jqxGrid({ source: dataAdapter });
            	//$("#dataTable2").jqxGrid('updatebounddata');
            });
         });
        
        /**
         * Hide and show column for Open trades - @id-dataTable
         * @param event
         */
        function showhide_datatable1(event){
            	//console.log('Inside Click');
            	$("#dataTable").jqxGrid('beginupdate');
            	if(event.checked == false){
            		$("#dataTable").jqxGrid('hidecolumn', event.id);
            	}
            	else{
            		$("#dataTable").jqxGrid('showcolumn', event.id);
            	}
            	$("#dataTable").jqxGrid('endupdate');
        	console.log("id of element "+event.id);
        }
        /**
         * Hide and show column for Upcoming Fixing - @id-dataTable2
         * @param event
         */
        function showhide_datatable2(event){
        	//console.log('Inside Click');
        	$("#dataTable2").jqxGrid('beginupdate');
        	if(event.checked == false){
        		$("#dataTable2").jqxGrid('hidecolumn', event.name);
        	}
        	else{
        		$("#dataTable2").jqxGrid('showcolumn', event.name);
        	}
        	$("#dataTable2").jqxGrid('endupdate');
    	console.log("id of element "+event.name);
    }